<template>
  <div class="index">
    
        
        
        <div class="">
          <Tabs value="name1">
            <TabPane label="产品消费" name="name1">
              <div class="search-condition">
                产品名称：
                <Input  placeholder="" style="width: 200px" >
                  <!-- <span slot="append">查询</span> -->
                </Input>
                 &nbsp;&nbsp;&nbsp;
                支付状态：
                <Select v-model="tradeType" style="width:100px">
                    <Option v-for="item in tradeTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                起止时间：
                <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
                至
                <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
                
               
                &nbsp;&nbsp;&nbsp;
                 
                 <Button type="primary">查询</Button>
              </div>
              <Table border stripe :columns="columns1" :data="data1" class="mt20">
                <template slot-scope="{ row, index }" slot="action">
                  <Icon type="ios-paper c1" title="查看" size="20" @click="gotoDetail(row)"/>
                </template>
              </Table>
            </TabPane>
            <TabPane label="云服务消费" name="name2">
              <div class="search-condition">
                会议名称：
                <Input  placeholder="" style="width: 200px" >
                  <!-- <span slot="append">查询</span> -->
                </Input>
                 &nbsp;&nbsp;&nbsp;
                会议类别：
                <Select v-model="tradeType" style="width:100px">
                    <Option v-for="item in meetingTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                起止时间：
                <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
                至
                <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
                
               
                &nbsp;&nbsp;&nbsp;
                 
                 <Button type="primary">查询</Button>
              </div>
              <Table border stripe :columns="columns2" :data="data1" class="mt20">
                <template slot-scope="{ row, index }" slot="action">
                  <Icon type="ios-paper c1" title="查看" size="20" @click="gotoDetail(row)"/>
                </template>
              </Table>
            </TabPane>
             <Button @click="handleTabsAdd" type="warning" size="small" slot="extra">数据导出</Button>
        </Tabs>
        </div>
  
    <div class="page mt20">
      <Page :total="100" show-sizer show-total />
    </div> 
  
  </div>
</template>

<script>
  export default {
    data () {
      return{
        position:[
          {title: '财务管理', link:'/admin/moneyManage'},
          {title: '消费明细'}
        ],
        tradeType: '1',
        tradeTypes:[
          {label: '已支付',value: '1'},
          {label: '未支付',value: '2'},
        ],
        meetingTypes: [
          {label: '视频会议',value: '1'},
          {label: '电话会议',value: '2'},
        ],
        columns1: [
          {title: '产品名称', key: 'id'},
          {title: '数量', key: 'address'},
          { title: '订单号', key: 'address'},
          { title: '日期', key: 'address'},
          { title: '支付金额（元）', key: 'address'},
          { title: '支付状态', key: 'address'},
          { title: '操作', slot: 'action', width: 60, align: 'center'},
         ],
         columns2: [
           {title: '消费日期', key: 'id'},
           {title: '会议ID', key: 'address'},
           { title: '会议名称', key: 'address'},
           { title: '会议类别', key: 'address'},
           { title: '开始时间', key: 'address'},
           { title: '结束时间', key: 'address'},
           { title: '在线总时长', key: 'address'},
           { title: '消费金额（元）', key: 'address'},
           { title: '状态', key: 'address'},
          
           { title: '操作', slot: 'action', width: 60, align: 'center'},
          ],
         data1:[
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           
         ]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    methods:{
      gotoDetail (item) {
        this.$router.push('expenditureDetail?id' + item.id)
      }
    }
  }
</script>

<style lang="less" scoped>

  </style>
